<template>
  <div class="w-[266px] flex flex-col overflow-auto">
    <a-range-picker v-model:value="formState.dateRange" class="w-full" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :allow-clear="false" @change="getData" />
    <a-select v-model:value="formState.categoryCode" class="w-full mt-2" @change="getData">
      <a-select-option v-for="item in categoryList" :key="item" :value="item.categoryCode">{{ item.categoryName }}</a-select-option>
    </a-select>
    <a-input-search v-model:value="formState.searchWord" placeholder="姓名/助记码/手机号" class="mt-2" @search="getData" @change="onInputChange" />
    <div class="mt-2 flex justify-between">
      <a-button type="primary" class="py-1 px-3" disabled>顺呼</a-button>
      <a-button type="primary" class="py-1 px-3" disabled>复呼</a-button>
      <a-button type="primary" class="py-1 px-3" disabled>选呼</a-button>
      <a-button type="primary" class="py-1 px-3" disabled>跳过</a-button>
    </div>
    <BaseList :data-source="tableData" :loading="loading" class="w-full flex-1 mt-2 overflow-auto">
      <template #renderItem="{ item }">
        <div class="py-3 px-3 !mt-0" :class="selectedItem?.jzbh === item.jzbh ? 'active' : ''" @click="onSelect(item)">
          <div class="flex justify-between items-center mb-2">
            <div class="flex-1 flex">
              <div class="max-w-20 text-base font-bold text-primary truncate mr-2">{{ item.brName }}</div>
              <div>
                <span class="w-14 text-grey mr-1">{{ item.brXb }}</span>
                <span class="text-right text-grey mr-1">{{ item.brAge }}{{ item.ageUnit }}</span>
                <!-- applyPath 申请来源;0:门诊|1:住院|2:体检|3:质控|4:手工添加 -->
                <RoundTag v-if="item.applyPath === 0" class="-mt-2">门</RoundTag>
                <RoundTag v-if="item.applyPath === 1" bg-color="rgb(212, 107, 8)" class="-mt-2">住</RoundTag>
                <RoundTag v-if="item.applyPath === 2" bg-color="rgb(212, 107, 8)" class="-mt-2">体</RoundTag>
                <RoundTag v-if="item.applyPath === 3" bg-color="rgb(212, 107, 8)" class="-mt-2">质</RoundTag>
                <RoundTag v-if="item.applyPath === 4" bg-color="rgb(212, 107, 8)" class="-mt-2">手</RoundTag>
              </div>
            </div>
            <LabelValue :width="76" value-class="!pr-0 text-right" :value="dayjs(item.applyTime).format('YYYY-MM-DD')" />
          </div>
          <div>
            <LabelValue :width="220" :value="item.applyList" />
          </div>
        </div>
      </template>
    </BaseList>
  </div>
</template>
<script setup>
import dayjs from 'dayjs'
import { debounce } from 'lodash-es'
import userStore from '../../store'

const store = userStore()
const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
})
const categoryList = ref([])
const selectedItem = ref({})

const geCategoryList = async () => {
  const { data, code } = await post('/ris/dictCategory/getDictCategoryListByEmp', {})
  if (code === 0) {
    categoryList.value = data || []
    if (categoryList.value.length > 0) {
      formState.value.categoryCode = categoryList.value[0].categoryCode
    }
    getData()
  }
}
const onInputChange = debounce(() => getData(), 300)

const { tableData, getData, loading } = useTable({
  url: '/ris/record/getRisApplyPatientList',
  immediate: false,
  pagination: false,
  formatParams: () => {
    return {
      ...formState.value,
      startDate: formState.value.dateRange?.[0] || '',
      endDate: formState.value.dateRange?.[1] || ''
    }
  },
  onSuccess: (data) => {
    store.searchData = formState.value
    if (data.length > 0) {
      selectedItem.value = data[0] || {}
      store.currentPatient = { ...data[0], brAge: data[0].brAge + data[0].ageUnit } || {}
    }
  }
})
const onSelect = (item) => {
  selectedItem.value = item
  store.currentPatient = { ...item, brAge: item?.brAge + item?.ageUnit }
}

onMounted(() => {
  geCategoryList()
})
</script>
